<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>网站后台管理模版</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css"/>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/jquery/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="page-content-wrap">
    <!-- <form class="layui-form" action="#"> -->
        <div class="layui-form-item">
            <div class="layui-inline tool-btn">
                <button class="layui-btn layui-btn-small layui-btn-normal addBtn hidden-xs" onclick="addSource()"><i
                        class="layui-icon">&#xe654;</i></button>
            </div>
            <div class="layui-inline">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
        </div>
    <!-- </form> -->
    <div class="layui-form" id="table-list">
        <table class="layui-hide" id="tag-table"></table>
        <script type="text/html" id="tag-table-operate">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>

    <!-- 增加和修改 -->
    <div id="setSource" class="layer_self_wrap" style="width:500px;display:none;">
        <form id="userForm" class="layui-form layui-form-pane" method="post" action="" style="margin-top: 20px;">
            <input id="pageNum" type="hidden" name="pageNum"/>
            <input id="id" type="hidden" name="id"/>
            <div class="layui-form-item" style="margin-left: 20px">
                <label class="layui-form-label" style="width: 150px">数据库地址</label>
                <div class="layui-input-inline">
                    <input id="url" name="url" lay-verify="required" autocomplete="off" class="layui-input"
                           type="text"/>
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 20px">
                <label class="layui-form-label" style="width: 150px">数据库名称</label>
                <div class="layui-input-inline">
                    <input id="dbName" name="dbName" lay-verify="required" autocomplete="off" class="layui-input"
                           type="text"/>
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 20px">
                <label class="layui-form-label" style="width: 150px">用户名</label>
                <div class="layui-input-inline">
                    <input id="userName" name="userName" lay-verify="required" autocomplete="off" class="layui-input"
                           type="text"/>
                </div>
            </div>
            <div class="layui-form-item" style="margin-left: 20px">
                <label class="layui-form-label" style="width: 150px">密码</label>
                <div class="layui-input-inline">
                    <input id="passwd" name="passwd" lay-verify="required" autocomplete="off" class="layui-input"
                           type="text"/>
                </div>
            </div>

            <div class="layui-form-item" align="center">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="userSubmit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    var pageCurr;
    var layer;
    var $;
    layui.use(['jquery', 'table', 'layer'], function () {
        layer = layui.layer;
        $ = layui.jquery;
        var table = layui.table;

        table.render({
            elem: '#tag-table',
            url: '/source/get',
            method: 'post', //默认：get请求
            page: true,
            response: {
                statusName: 'code',
                statusCode: 200,
                countName: 'totals',
                dataName: 'list'
            },
            cols: [[
                {type: 'numbers'}
                , {field: 'url', title: '数据库地址', align: 'center'}
                , {field: 'dbName', title: '数据库名称', align: 'center'}
                , {field: 'userName', title: '用户(组)名称', align: 'center'}
                , {field: 'passwd', title: '数据库密码', align: 'center'}
                , {title: '操作', align: 'center', toolbar: '#tag-table-operate'}
            ]],
            done: function (res, curr, count) {
                pageCurr = curr;
            }
        });
    });

    function addSource() {
        openSource(null, '添加数据源');
    }

    function openSource(data, title) {
        if (data == null || data == "") {
            $("#id").val("");
        } else {
            $("#id").val(data.id);
            $("#url").val(data.url);
            $("#dbName").val(data.dbName);
            $("#userName").val(data.userName);
            $("#passwd").val(data.passwd);
        }
        var pageNum = $(".layui-laypage-skip").find("input").val();
        $("#pageNum").val(pageNum);

        layer.open({
            type: 1,
            title: title,
            fixed: false,
            resize: false,
            shadeClose: true,
            area: ['550px'],
            content: $('#setSource'),
            end: function () {
                cleanUser();
            }
        });
    }

    function cleanUser() {
        $("#id").val("");
        $("#url").val("");
        $("#dbName").val("");
        $('#userName').html("");
        $('#passwd').html("");
    }

</script>
</body>

</html>